<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">共享充电宝设备统计</view>
		</view>
		<view class="cu-card no-card margin-top-sm">
			<view class="cu-item">
				<view class="padding text-lg solid-bottom">设备部署情况</text></view>
				<view class="margin-top">
					<canvas canvas-id="canvas_deploy" id="canvas_deploy" class="charts" @touchend="tap"></canvas>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uChartUtils from '@/common/uchart_utils';
	
	var uChartsInstance = {};
	
	export default {
		data() {
			return {
				cWidth:uni.upx2px(750),
				cHeight:uni.upx2px(500),
				cDeployId:'canvas_deploy'
			};
		},
		onLoad(option){
			this._loadStatisticsDeployData();
		},
		methods: {
			//统计部署设备数
			_loadStatisticsDeployData:function(){
				const ctx = uni.createCanvasContext(this.cDeployId, this);
				const _self = this;
				const api = this.$request;
				api.post(api.url.deviceIndex,{
					deviceFunCodes:["CDB"]
				},res=>{
					if(res.code==200){
						let item = res.body.items[0];
						let deployCount = Number.parseInt(item.deployCount);
						let notDeployCount = Number.parseInt(item.deviceCount) - deployCount;
						
						let data = [{name:'已部署设备',value:deployCount},{name:'未部署设备',value:notDeployCount}];
						
						uChartsInstance[_self.cDeployId] = uChartUtils.drawPieCharts(ctx,_self.cWidth,_self.cHeight,data);
						
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
					}
				})
			},
			tap(e){
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	}
</script>

<style lang="less">
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}
.container uni-canvas.charts{width:750rpx;height:500rpx;}
</style>
